<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LAB - Dashboard</title>
<link type="text/css" href="css/theme/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>

<style type="text/css">
    #selector > div > a {
        text-decoration: none;
    } 
</style>

<script type="text/javascript">

    $(function() {
        init();
    });

    function init() {
        $('#plugin').change(function(event) {
            $("#type").html("");
            $("#type").hide();
            getTypes(this.value);
        });

        $('#type').change(function(event) {
            addGraph();
        });

        $('#hour, #day, #week, #month, #year').click(function() {
            $('#hourgraph, #daygraph, #weekgraph, #monthgraph, #yeargraph').hide();
            var g_id = "#" + this.id + "graph";
            $(g_id).show();
        });

        $('#refresh').click(function() {
            reload();
        });

        $("button").button();

        getSystemInfo();
        $("#plugin").val("interface");
        getTypes("interface");
        setInterval("reload()", 120000);
    }

    function reload() {
        getSystemInfo();
        addGraph();
    }

    function addGraph() {
        var type = $("#type").val();
        var plugin = $("#plugin").val();
        if(type === null) {
            type = "";
        }
        createGraph(plugin, type);
        $("#graphview").html("Loading ...");
    }

    function createGraph(plugin, type) {
        var query = "plugin=" + plugin + "&type=" + type;
        $.ajax({
            type: "GET",
            url: "monitor/rungraph.php",
            data: query,
            success: function(data){
                var d = new Date();
                var str = "<img id='hourgraph' src='/monitor/imgs/" + plugin + "/" + type + "/hour.png?" + d.getTime() + "'>";
                str += "<img id='daygraph' src='/monitor/imgs/" + plugin + "/" + type + "/day.png?" + d.getTime() + "'>";
                str += "<img id='weekgraph' src='/monitor/imgs/" + plugin + "/" + type + "/week.png?" + d.getTime() + "'>";
                str += "<img id='monthgraph' src='/monitor/imgs/" + plugin + "/" + type + "/month.png?" + d.getTime() + "'>";
                str += "<img id='yeargraph' src='/monitor/imgs/" + plugin + "/" + type + "/year.png?" + d.getTime() + "'>";
                $("#graphview").html(str);
                $('#daygraph, #weekgraph, #monthgraph, #yeargraph').hide();
            }
        });
    }

    function getTypes(plugin) {
        var query = "gettype=1&plugin=" + plugin;

        $.ajax({
            type: "GET",
            url: "monitor/rungraph.php",
            data: query,
            dataType: "json",
            success: function(data){
                if(data == "") {
                    $("#type").hide();
                }
                else {
                    var tmp = "";
                    var i = 0;
                    for(; i < data.length; i++) {
                        tmp += "<option value='" + data[i] + "'>" + data[i] + "</option>";
                    }
                    $("#type").show();
                    $("#type").html(tmp);
                }
                addGraph();
            }
        });
    }

    function getSystemInfo() {
        var query = "info=all";

        $.ajax({
            type: "GET",
            url: "monitor/system_info.php",
            data: query,
            dataType: "json",
            success: function(data){
                var html = "<table>";
                html += "<tr><td style='width: 30%;'><b>Hostname:</b></td><td>" + data['hostname'] + "</td></tr>";
                html += "<tr><td><b>Version:</b></td><td>" + data['version'] + "</td></tr>";
                html += "<tr><td><b>System Time:</b></td><td>" + data['systime'] + "</td></tr>";
                html += "<tr><td><b>Uptime:</b></td><td>" + data['uptime'] + "</td></tr>";
                html += "<tr><td><b>Install Type:</b></td><td>" + data['inst_type'] + "</td></tr>";
                html += "</table>";
                $("#system_info").html(html);
            }
        });
    }

    function getSystemStatus() {
        var query = "info=all";

        $.ajax({
            type: "GET",
            url: "monitor/system_status.php",
            data: query ,
            dataType: "json",
            success: function(data){
                $("#system_status").html(html);
            }
        });
    }
</script>
</head>
<body>

    <button id="refresh" class="ui-widget-button">Refresh</button>
    <br/>
    <div style="height: 200px; width: 48%; float: left;" class="ui-widget-content">
        <div class="ui-widget-header lab-ui-header">System Information</div>
            <div id="system_info">
            </div>
        </div>
    </div>
    <div style="height: 200px; width: 48%; float: right;" class="ui-widget-content">
        <div class="ui-widget-header lab-ui-header">System Status</div>
            <div id="system_status">
            <div class="ui-state-highlight ui-corner-all" style="margin: 20px; padding: .2em;"> 
                <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> 
                <strong>Normal</strong></p> 
            </div>
            </div>
        </div>
    </div>
    <div style="clear: both;"></div><br><br>
    <div id="graph" style="overflow: hidden;" class="ui-widget-content">
        <div id="selector" class="ui-widget-header lab-ui-header" style="overflow: hidden;">
            <div style="float: left;">
            <select id="plugin">
            <option value="interface">Network</option>
            <option value="memory">Memory</option>
            <option value="cpu">CPU</option>
            <option value="processes">Processes</option>
            <option value="load">Load</option>
            </select>
            <select id="type">
            </select>
            </div>
            <div style="float: right;">
            <a href="#" id="hour">Hour |</a>
            <a href="#" id="day"> Day |</a>
            <a href="#" id="week"> Week |</a>
            <a href="#" id="month"> Month |</a>
            <a href="#" id="year"> Year</a>
            </div>
        </div>
        <div id="graphview" style="width: 700px; padding: 5px; margin-left: auto; margin-right: auto;">
        </div>
    </div>
</body>
</html>
